import React, { forwardRef } from 'react';
import * as SheetPrimitive from '@radix-ui/react-dialog';

// Sheet组件
const Sheet = SheetPrimitive.Root;

// SheetTrigger组件
const SheetTrigger = SheetPrimitive.Trigger;

// SheetPortal组件
const SheetPortal = SheetPrimitive.Portal;

// SheetOverlay组件
const SheetOverlay = forwardRef<HTMLDivElement, SheetPrimitive.DialogOverlayProps>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    ref={ref}
    className={`fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ${className}`}
    {...props}
  />
));

// SheetContent组件
const SheetContent = forwardRef<HTMLDivElement, SheetPrimitive.DialogContentProps>(({ className, side = 'right', ...props }, ref) => (
  <SheetPrimitive.Content
    ref={ref}
    side={side}
    className={`fixed z-50 m-0 flex h-full w-[85vw] max-w-md flex-col rounded-l-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:duration-300 data-[state=closed]:duration-200 data-[side=left]:slide-in-from-left data-[side=right]:slide-in-from-right data-[side=top]:slide-in-from-top data-[side=bottom]:slide-in-from-bottom data-[state=closed]:slide-out-to-left data-[state=closed]:data-[side=left]:slide-out-to-left data-[state=closed]:data-[side=right]:slide-out-to-right data-[state=closed]:data-[side=top]:slide-out-to-top data-[state=closed]:data-[side=bottom]:slide-out-to-bottom ${className}`}
    {...props}
  />
));

// SheetHeader组件
const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={`flex flex-col space-y-2 text-center sm:text-left ${className}`} {...props} />
);

// SheetTitle组件
const SheetTitle = forwardRef<HTMLHeadingElement, SheetPrimitive.DialogTitleProps>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={`text-xl font-semibold leading-none tracking-tight ${className}`}
    {...props}
  />
));

// SheetDescription组件
const SheetDescription = forwardRef<HTMLParagraphElement, SheetPrimitive.DialogDescriptionProps>(({ className, ...props }, ref) => (
  <SheetPrimitive.Description
    ref={ref}
    className={`text-sm text-muted-foreground ${className}`}
    {...props}
  />
));

// SheetFooter组件
const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 ${className}`} {...props} />
);

// SheetClose组件
const SheetClose = SheetPrimitive.Close;

// 导出所有组件
export {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetOverlay,
  SheetPortal,
  SheetTitle,
  SheetTrigger,
};